<template>
	<view class="gifts">
		<view class="list_box w100" v-for="(item, index) in attrsList" :key="index">
			<view class="list_head_title flexjus">
				<view class="left_xl_title flex">
					<view class="quan_box"></view>
					<view class="right_box_title s24 familytow fblod">
						{{ item.attr }}
					</view>
				</view>
				<view class="right_btn s24 familytow fblod txtali" @click="isGift(item)">去调整</view>
			</view>
			<view class="flexjus" v-for="(items, indexs) in item.values" :key="indexs">
				<view class="list_bottom_box s28 f500 family">{{ items.value }}×{{ items.number }}</view>
				<view class="right_price s28 familytow fblod">
					<text class="s20">￥</text>
					{{ items.price }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			goodsData: {},
			attrsList: []
		};
	},
	onLoad(options) {
		this.goodsData = uni.getStorageSync('goodsData');
		this.getOrderList();
	},
	methods: {
		getOrderList() {
			this.$request({
				url: 'manage/getSpec',
				data: {
					package_id: this.goodsData.goods[0].goods_id
				}
			}).then((res) => {
				this.attrsList = res.data.data;
			});
		},
		isGift(item) {
			this.$store.commit('editGive', item);
			uni.navigateTo({
				url: `./chooseGift?orderId=${this.goodsData.id}`
			});
		}
	}
};
</script>

<style scoped lang="scss">
.gifts {
	overflow: hidden;

	.list_box {
		box-sizing: border-box;
		padding: 46upx 32upx 20upx 32upx;

		.list_bottom_box {
			width: 376upx;
			height: 40upx;
			color: #ebbe87;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-top: 24upx;
		}

		.right_price {
			color: #ff3f4a;
			line-height: 86upx;
		}

		.right_btn {
			width: 136upx;
			height: 50upx;
			background: #333333;
			border-radius: 25upx;
			line-height: 50upx;
			color: #fff;
		}

		.quan_box {
			width: 10upx;
			height: 10upx;
			border: 6upx solid #000000;
			border-radius: 50%;
			margin-top: 8upx;
		}

		.right_box_title {
			color: #333;
			margin-left: 8upx;
		}
	}
}
</style>
<style>
page {
	background-color: rgba(235, 190, 135, 0.1);
}
</style>
